﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评测平台密码修改</title>
    <!--&lt;!&ndash;<meta name="viewport" content="width=device-width,initial-scale=1">&ndash;&gt;-->
    <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
    <!--js文件-->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <!--样式文件-->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body class="open-style">
<!-- 主内容输入区 -->
<form id="form1">
<div class="main-content">
    <table> 
        <tr>
            <td>QQ号码：</td>       
            <td> <input name="qqnum" id="newpasswords"  placeholder="请输入账号">
            </td>
        </tr>
        <tr class="passwords">
            <td>QQ密码：</td>
            <td> <input type="password" name="qqpwd" id="confirmwords"  placeholder="请输入密码" required="required">
            </td>
        </tr>
    </table>
</div>
</div>
<!-- 页脚区域 -->
<div class="footer-content">
  <input type="button" onclick="login()" class="submits" value="确 认 绑 定">
</div>
</form>
<!-- 模态弹出框 -->
<div class="modal  bs-example-modal-sm" id="waring_2">
        <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                    <a class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
                    <h4 class="modal-title" id="myModalLabel">提示消息</h4>
            </div>
            <div class="modal-body" >
                请稍等...
            </div>
        </div>
        </div>
</div>
<script>
// 封装弹框方法
function modals(warings){
    $(".modal-body").text(warings);
    $(".modal .close").click(function(){ $(".modal").hide();$(".modal-body").text("请稍等...")})
    setTimeout(function(){ $(".modal").hide();$(".modal-body").text("请稍等...")},2000)
}
// 刷新页面显示QQ信息
$(document).ready(function(){
    $.ajax({
        type: "get",//方法类型
        dataType: "json",//预期服务器返回的数据类型
        url: "/user/findbindedqq" ,//url
        success: function (result) {
            console.log(result)
              if (result.code == 200) { 
                       $(".passwords").remove();
                       $("#newpasswords").val(result.msg[0].qqnum).attr("readonly","readyonly").css({"background":"#eee","marginBottom":"1.2rem"});
                }
             else{}
         }
    })
})
// 提交表单
 function login() {
    $(".modal").show();
    var strs=$("#newpasswords").val();
    if($("#confirmwords").val()==""){ modals("密码不能为空！") 
         return false}
    else if($("#newpasswords").val()==""){
        modals("QQ号不能为空！") ;
        return false
         }
    else if(!(/^[1-9][0-9]{5,10}$/.test(strs))){
        modals("确认QQ号是否有误！");
        return false
     }
    else{
        // ajax提交表单
            $.ajax({
            //几个参数需要注意一下
                type: "get",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/user/bindqq" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.code == 200) {
                        modals("账号绑定成功！");
                        $(".footer-content .submits").attr("disabled","disabled");
					} else if(result.code == 300){
                        modals("账号已绑定！")
					} else {
                        modals("绑定失败，请重试！")
					}
                },
                error : function() {
                    modals("操作失败,请稍后再试！")
                }
            });
        }
    }
</script>
</body>
</html>